<template>
  <div>
    <zc-row class="container">
      <zc-button @click="clickHandle">默认按钮</zc-button>
      <zc-button type="primary">主要按钮</zc-button>
      <zc-button type="success">成功按钮</zc-button>
      <zc-button type="info">信息按钮</zc-button>
      <zc-button type="warning">警告按钮</zc-button>
      <zc-button type="error">危险按钮</zc-button>
    </zc-row>
    <zc-row class="container">
      <zc-button round>默认按钮</zc-button>
      <zc-button round type="primary">主要按钮</zc-button>
      <zc-button round type="success">成功按钮</zc-button>
      <zc-button round type="info">信息按钮</zc-button>
      <zc-button round type="warning">警告按钮</zc-button>
      <zc-button round type="error">危险按钮</zc-button>
    </zc-row>
    <zc-row class="container">
      <zc-button disabled round type="primary" :loading="true"
        >加载中</zc-button
      >
    </zc-row>
    <zc-row class="container">
      <zc-button circle type="primary" icon="modify"></zc-button>
      <zc-button type="error" circle icon="delete"></zc-button>
      <zc-button circle type="primary" icon="collect"></zc-button>
      <zc-button circle type="primary" icon="shared"></zc-button>
      <zc-button circle type="success" icon="success"></zc-button>
    </zc-row>

    <div style="width: 50%; margin: auto">
      <zc-input placeholder="请输入账号">
        <template v-slot:prepend>Http://</template>
      </zc-input>
      <zc-input
        prefix-icon="zc-icon-shared"
        @focus="handleFocus"
        @blur="handleFocus"
        placeholder="请输入"
      ></zc-input>
      <zc-input
        suffix-icon="zc-icon-collect"
        type="text"
        @focus="handleFocus"
        @blur="handleFocus"
        placeholder="请输入"
      ></zc-input>
      <zc-input
        type="password"
        showPasswrod
        @focus="handleFocus"
        placeholder="请输入"
        v-model="text"
        @blur="handleFocus"
      ></zc-input>
      <zc-input
        clearable
        v-model="text1"
        placeholder="请输入撒大苏打"
      ></zc-input>
      <zc-input placeholder="请输入内容" autoFoucs v-model="input">
        <template v-slot:append>.com</template>
      </zc-input>
      <zc-input
        placeholder="请输入内容"
        maxlength="10"
        show-word-limit
        v-model="input1"
      >
      </zc-input>
      <div style="margin: 20px 0">只能输入数字</div>

      <zc-input
        placeholder="请输入内容"
        type="number"
        maxlength="10"
        show-word-limit
        v-model="input3"
      >
      </zc-input>
    </div>

    <div style="width: 180px">
      <div style="margin: 20px 0">最大最小限制</div>
      <zc-input-number
        :min="1"
        :max="10"
        v-model="num"
        @change="handleChange"
      ></zc-input-number>

      <div style="margin: 20px 0">禁用效果</div>
      <zc-input-number
        disabled
        v-model="num1"
        @change="handleChange"
      ></zc-input-number>
      <div style="margin: 20px 0">step累加</div>
      <zc-input-number
        :step="0.1"
        :min="1"
        :precision="2"
        v-model="num2"
        @change="handleChange"
      ></zc-input-number>
    </div>
    <div style="margin: 20px 0">按钮权限</div>
    <zc-button v-permission="1" type="error">权限1</zc-button>
    <zc-button v-permission="3" type="warning">权限2</zc-button>
    <zc-button v-permission="4" type="success">权限3</zc-button>
  </div>
</template>

<script>
import { isEdge, isIE } from "./utils/utils";

export default {
  name: "App",
  data() {
    return {
      loading: false,
      text: "",
      text1: "",
      input1: "",
      num: 1,
      num2: 1,
      num1: 1,
      input: "",
      input3: ""
    };
  },
  created() {
    // console.log("判断浏览器", );
  },
  methods: {
    change() {
      this.loading = true;
    },
    clickHandle() {
      console.log("1232131");
    },
    handleFocus(e) {
      console.log("1111111");
    },
    clearValue() {
      console.log(1111111);
    },
    handleChange(value) {
      console.log(value);
    }
  }
};
</script>

<style scoped lang="scss">
.container button {
  margin: 10px;
}
</style>
